<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <!-- Ventana modal ShadowBox tubetrucos.com-->

    <ui:composition template="comun.xhtml">
        <ui:define name="body">
            <h:outputScript library="js" name="json2.js" />
            <script type='text/javascript'>
                //<![CDATA[
                function actualizarFiltro(){
                    
                    var actualizaFiltro = document.getElementById("formularioInformacionSucursalesID:actualizaFiltroID");
                    if(actualizaFiltro.value== 'true'){
                        var selectZona = document.getElementById("formularioInformacionSucursalesID:tablaInformacionLocalesID:ColZonaID_filter");
                        var textoFormatoJson = document.getElementById("formularioInformacionSucursalesID:valorJsonID");
                        var ObjJson = JSON.parse(textoFormatoJson.value);
                                             
                        selectZona.options.length = 0;
                        var tam = ObjJson.length ;
                        for (var i=0; i<tam ;i++)
                        { 
                            selectZona.options[selectZona.options.length] = new Option(ObjJson[i].nombre, ObjJson[i].codigo);
                        }
                    }
                    
                    
                }
                // ]]>
            </script>
            <h:form id="formularioInformacionSucursalesFotosID">
                <h:panelGrid columns="#{informacionSucursalesControlador.totalPaises}" cellspacing="15" > 
                    <ui:repeat var="pais" value="#{informacionSucursalesControlador.paises}">
                        <p:commandLink  update=":formularioInformacionSucursalesID" >
                            <f:setPropertyActionListener value="#{pais}" target="#{informacionSucursalesDataManager.paisSeleccionado}" /> 
                            <f:setPropertyActionListener value="#{true}" target="#{informacionSucursalesDataManager.limpiaFiltro}" /> 
                            <f:setPropertyActionListener value="#{null}" target="#{informacionSucursalesDataManager.valorCiudadAnterior}" /> 
                            <f:setPropertyActionListener value="#{false}" target="#{informacionSucursalesDataManager.actualizaFiltro}" /> 
                            <img title="#{pais.paNombre}" src="#{pais.paImagen}" style="height: 20px; width: 20px"/>
                        </p:commandLink>
                    </ui:repeat>
                </h:panelGrid>
            </h:form>
            <h:form id="formularioInformacionSucursalesID">
                <h:inputHidden value="#{informacionSucursalesDataManager.json}" id="valorJsonID"/>
                <h:inputHidden value="#{informacionSucursalesDataManager.actualizaFiltro}" id="actualizaFiltroID"/>
                <p:remoteCommand  name="iniciarDatos"
                                  process="@this"
                                  actionListener="#{informacionSucursalesControlador.iniciarDatos()}"
                                  update="panelPaisSeleccionadoID"/>
                <h:panelGrid id="panelPaisSeleccionadoID" columns="2" cellspacing="5">
                    <h:outputText value="#{informacionSucursalesDataManager.paisSeleccionado.paNombre}" style=" font-size: 20px; color: #FF6600"/>
                </h:panelGrid>
                <p:outputPanel id="panelInformacionLocalesID" >
                    <p:dataTable value="#{informacionSucursalesControlador.informacionSucursalesDataModel}" 
                                 id="tablaInformacionLocalesID"
                                 var="sucursal"
                                 paginator="true"
                                 rows="5" 
                                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                 rowsPerPageTemplate="5,10,15" 
                                 emptyMessage="No existen Sucursales registradas">

                        <p:ajax event="filter" listener="#{informacionSucursalesControlador.listenFilter}" 
                                update=":formularioInformacionSucursalesID:valorJsonID :formularioInformacionSucursalesID:actualizaFiltroID" 
                                oncomplete="actualizarFiltro();"/>

                        <p:column headerText="Nombre " sortBy="#{sucursal.suDescripcion}">
                            <br/>
                            <center><h:outputText value="#{sucursal.suNombre}"/></center>
                            <h:outputLink style="float: bottom;"
                                                                  onclick="window.open('descripcionLocalSucursal.xhtml?id=#{sucursal.loCodigo.loCodigo}&amp;id2=#{sucursal.suCodigo}', 
                                                                  'popupWindowName', 
                                                                  'width=800,height=510,titlebar=no,directories=no, dependent=yes, resizable=no, menubar=no, toolbar=no, fullscreen=no, location=no, top=135, left=290, status=no'); 
                                                                  return false;" value="#">                  
                               <p:imageSwitch effect="zoom">  
                                    <ui:repeat value="#{sucursal.imagenes}" var="imagenes">  
                                        <center><p:graphicImage value="#{imagenes}" 
                                                                width="300" height="300" 
                                                                style=" position: relative; top: 25px; bottom: 25px; left: 8px"/></center>  
                                    </ui:repeat>  
                               </p:imageSwitch> 
                            </h:outputLink>  
                        </p:column>
                        
                        <p:column  id="colCiudadID" headerText="Ciudad" sortBy="#{sucursal.zoCodigo.ciCodigo.ciNombre}"
                                   filterBy="#{sucursal.zoCodigo.ciCodigo.ciCodigo}"
                                   filterOptions="#{informacionSucursalesControlador.selectItemCiudad}" >
                            <h:outputText value="#{sucursal.zoCodigo.ciCodigo.ciNombre}"/>
                        </p:column>

                        <p:column  headerText="Tipo " sortBy="#{sucursal.loCodigo.tiLoCodigo.tiLoNombre}"
                                   filterBy="#{sucursal.loCodigo.tiLoCodigo.tiLoCodigo}"
                                   filterOptions="#{informacionSucursalesControlador.selectItemTipoLocal}">
                            <h:outputText value="#{sucursal.loCodigo.tiLoCodigo.tiLoNombre}"/>
                        </p:column>

                        <p:column id="ColZonaID" headerText="Zona " sortBy="#{sucursal.zoCodigo.zoNombre}" 
                                  filterBy="#{sucursal.zoCodigo.zoCodigo}"
                                  filterOptions="#{informacionSucursalesControlador.selectItemZona}" >
                            <h:outputText value="#{sucursal.zoCodigo.zoNombre}"/>
                        </p:column>
                        <p:column headerText="Descripción">
                            <center><h:outputText value="#{sucursal.suDescripcion}" style="float: top; color: #CCCCCC; font-size: 13px"/></center>
                            <center><table cellspacing="0" style="height: 30px; width: 80px; border: 0; border-color: #CCCCCC">
                                    <tr style="height: 30px; width: 80px">
                                        <td style="height: 30px; width: 50px">
                                            <center><h:outputLink style="float: bottom;"
                                                                  onclick="window.open('googleMap.xhtml?id=#{sucursal.suCodigo}', 
                                                                      'popupWindowName', 
                                                                      'width=600,height=350,titlebar=no,directories=no, dependent=yes, resizable=no, menubar=no, toolbar=no, fullscreen=no, location=no, top=200, left=400, status=no'); 
                                                                      return false;" value="#">
                                                    <img title="Google Maps" src="http://#{initParam['DIRECCION_SERVIDOR']}/Iconos/googleMaps.jpg" style="height: 30px; width: 50px"/>
                                                </h:outputLink></center>
                                        </td>
                                        <td style="height: 30px; width: 30px">
                                            <center><h:outputLink style="float: bottom" 
                                                                  onclick="window.open('eventoLocalSucursal.xhtml?id2=#{sucursal.suCodigo}', 
                                                                      'popupWindowName',
                                                                      'width=725,height=350,titlebar=no,directories=no, dependent=yes, resizable=no, menubar=no, toolbar=no, \n\
                                                                      fullscreen=no, location=no, top=200, left=340, status=no'); 
                                                                      return false;" value="#">
                                                    <img title="Eventos #{sucursal.suNombre}" src="http://#{initParam['DIRECCION_SERVIDOR']}/Iconos/evento.jpg" style="height: 30px; width: 30px"/>
                                                </h:outputLink></center>
                                        </td>
                                        <td style="height: 30px; width: 30px">
                                            <center><h:outputLink style="float: bottom"
                                                                  onclick="window.open('membresia.xhtml?id=#{sucursal.loCodigo.loCodigo}', 
                                                                      'popupWindowName',
                                                                      'width=600,height=390,titlebar=no,directories=no, dependent=yes, resizable=no, menubar=no, toolbar=no, fullscreen=no, location=no, top=200, left=400, status=no'); 
                                                                      return false;" value="#">
                                                    <img title="Crear Membresía" src="http://#{initParam['DIRECCION_SERVIDOR']}/Iconos/membresia.jpg" style="height: 30px; width: 30px"/>
                                                </h:outputLink></center>
                                        </td>
                                        <td style="height: 30px; width: 30px">
                                            <center><h:outputLink style="float: bottom"
                                                                  onclick="window.open('cartaCliente.xhtml?id=#{sucursal.loCodigo.loCodigo}', 
                                                                      'popupWindowName',
                                                                      'width=600,height=390,titlebar=no,directories=no, dependent=yes, resizable=no, menubar=no, toolbar=no, fullscreen=no, location=no, top=200, left=400, status=no'); 
                                                                      return false;" value="#">
                                                    <img title="Carta" src="http://#{initParam['DIRECCION_SERVIDOR']}/Iconos/carta.jpg" style="height: 30px; width: 30px"/>
                                                </h:outputLink></center>
                                        </td>
                                    </tr>
                                </table></center>    
                        </p:column>
                    </p:dataTable>
                </p:outputPanel>
            </h:form>
            <p:separator/>
        </ui:define>
    </ui:composition>
</html>